<template>
    <!-- 教师管理 -->
    <el-dialog
        title="教师管理"
        :visible="drawer == 'teacher'"
        class="dialogForm"
        :before-close="handleClose"
        width="width"
    >
        <div class="row ">
            <div style="margin-right:20px;padding-top:7px">
                已添加教师
            </div>
            <div style="width:70%">
                <draggable
                    v-model="teacherList"
                    v-bind="dragOptions"
                    :move="onMove"
                    @start="isDragging = true"
                    @end="isDragging = false"
                >
                    <transition-group type="transition" :name="'flip-list'">
                        <div
                            class="teachItem row ali_cen ju_bet"
                            v-for="(item, k) in teacherList"
                            :key="item.teacherId"
                        >
                            <div class="row ali_cen">
                                <el-avatar
                                    size="large"
                                    :src="item.avatar"
                                    style="margin-right:10px"
                                ></el-avatar>
                                <span>{{ item.nickname }}</span>
                            </div>
                            <i class="el-icon-close" @click="delTeacher(k)"></i>
                        </div>
                    </transition-group>
                </draggable>
                <SelectTeacher
                    :teacherIds="teacherIds"
                    :multiple="true"
                    v-on:getTeacher="getTeacher"
                ></SelectTeacher>

                <div class="teachTxt">只能添加有教师权限的用户</div>
            </div>
        </div>
        <div slot="footer">
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" @click="postTeacher">确 定</el-button>
        </div>
    </el-dialog>
</template>
<script>
import draggable from "vuedraggable";
import SelectTeacher from "@/views/edu/teacher/components/SelectTeacher";
import { postTeacher, delTeacher, teacherList } from "@/api/edu/service";
export default {
    name: "Config",
    components: {
        draggable,
        SelectTeacher
    },
    data() {
        return {
            teacherList: [],
            teacherIds: "",
            isDragging: false,
            dragOptions: {
                animation: 0,
                group: "description",
                disabled: false,
                ghostClass: "ghost"
            }
        };
    },
    props: ["drawer", "courseId", "paramType"],
    watch: {
        isDragging(newValue) {
            if (newValue) {
                this.delayedDragging = true;
                return;
            }
            this.$nextTick(() => {
                this.delayedDragging = false;
            });
            // console.log(this.chapterList);
        },
        drawer() {
            if (this.drawer == "teacher") {
                teacherList(this.courseId, this.paramType).then(res => {
                    this.teacherList = res.data.list;
                    console.log(this.teacherList);
                    let teacherIds = [];
                    if (this.teacherList.length) {
                        this.teacherList.forEach(item => {
                            item.nickname = item.teacherInfo.nickname;
                            item.avatar = item.teacherInfo.avatar;
                            teacherIds.push(item.teacherId);
                        });
                    }
                    this.teacherIds = teacherIds.join(",");
                });
            }
        }
    },
    created() {},
    methods: {
        delTeacher(k) {
            this.teacherList.splice(k, 1);
            let teacherIds = [];
            if (this.teacherList.length) {
                this.teacherList.forEach(item => {
                    teacherIds.push(item.teacherId);
                });
            }
            this.teacherIds = teacherIds.join(",");
            console.log(this.teacherIds);
            // delTeacher()
        },
        postTeacher() {
            let teacherIds = [];
            this.teacherList.forEach(item => {
                teacherIds.push(item.teacherId);
            });
            postTeacher(
                this.courseId,
                {
                    teacherIds
                },
                this.paramType
            ).then(res => {
                if (res.code == 200) {
                    this.handleClose();
                } else {
                    this.$messge.error(res.msg);
                }
            });
        },
        onMove({ relatedContext, draggedContext }) {
            const relatedElement = relatedContext.element;
            const draggedElement = draggedContext.element;
            return (
                (!relatedElement || !relatedElement.fixed) &&
                !draggedElement.fixed
            );
        },
        getTeacher(teachers) {
            this.teacherList = teachers;
        },
        // 关闭抽抽屉
        handleClose(done) {
            // this.drawer = "";
            this.$emit("update:drawer", "");
            // done();
        }
    }
};
</script>
<style lang="scss">
.teachItem {
    padding: 10px 40px;
    box-sizing: border-box;
    margin-bottom: 20px;
    border-radius: 6px;
    border: 1px solid #ddd;
}
.teachTxt {
    margin-top: 5px;
    color: #a1a1a1;
    font-size: 14px;
}
.dialogForm {
    display: block;
    .el-dialog {
        margin-top: 15vh !important;
    }
}
.flip-list-move {
    transition: transform 0.5s;
}

.no-move {
    transition: transform 0s;
}

.ghost {
    opacity: 0.1;
    background: #eee;
}
.list-group {
    min-height: 0 !important;
    border: none !important;
}
</style>
